"use client";

import { Card } from "antd";
import {
    DatabaseOutlined,
    FileTextOutlined,
    BookOutlined,
    BarChartOutlined,
} from "@ant-design/icons";

const stats = [
    {
        title: "Species",
        value: 12,
        icon: <DatabaseOutlined style={{ fontSize: 48, color: "#1890ff" }} />,
    },
    {
        title: "Datasets",
        value: 236,
        icon: <FileTextOutlined style={{ fontSize: 48, color: "#52c41a" }} />,
    },
    {
        title: "Publications",
        value: 38,
        icon: <BookOutlined style={{ fontSize: 48, color: "#faad14" }} />,
    },
    {
        title: "Results",
        value: 782,
        icon: <BarChartOutlined style={{ fontSize: 48, color: "#eb2f96" }} />,
    },
];

export default function StatsOverview() {
    return (
        <div className="grid grid-cols-2 md:grid-cols-4 gap-6 my-8">
            {stats.map((item) => (
                <Card
                    key={item.title}
                    className="text-center shadow rounded-2xl"
                >
                    <div className="flex flex-col items-center justify-center space-y-2">
                        {item.icon}
                        <div className="text-lg font-semibold">
                            {item.title}
                        </div>
                        <div className="text-2xl font-bold">{item.value}</div>
                    </div>
                </Card>
            ))}
        </div>
    );
}
